﻿/**** BUTTON DEFINTION *************
Here is main style for whole 
button layout. Color schemes
are defined on bottom and 
should always be on bottom.
***********************************/
a.btn {
	display: inline-block;
	position: relative;
	padding: 0 15px;
	margin-bottom: 4px;
	font: bold 12px Arial, sans-serif;
	text-align: center;
	font-style: italic;
	text-decoration: none;
	border-style: solid;
	border-width: 1px;
	overflow: visible;
	border-radius: 12px / 20px;
	-moz-border-radius: 12px / 20px;
	-webkit-border-radius: 12px / 20px;
	 background-clip: padding-box; 
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
}
a.btn:after {
	content: '\00a0';
	position: absolute;
	display: block;
	z-index:-1;
	top: 6px;
	left: -1px;
	width: 100%;
	border-radius: 12px / 20px;
	-moz-border-radius: 12px / 20px;
	-webkit-border-radius: 12px / 20px;
	 background-clip: padding-box; 
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
}
a.btn:link {}
a.btn:visited {}
a.btn:active { margin-top: 4px; margin-bottom: 0; }
a.btn:active:after { top: 2px; }
a.btn:hover {
	box-shadow: inset 0 0 4px 4px rgba(0,0,0,0.07);
	-moz-box-shadow: inset 0 0 4px 4px rgba(0,0,0,0.07);
	-webkit-box-shadow: inset 0 0 4px 4px rgba(0,0,0,0.07);
}

a.small {
	height: 24px;
	line-height: 24px;
}
a.medium { 
	height: 28px;
	line-height: 28px;
}
a.big {
	height: 32px;
	line-height: 32px;
}
/*** COLOR SCHEMES ******************************
From here you can pick your desired color scheme
Just copy color you need into stylesheet under 
button definiton above and you are ready to go!
************************************************/

/*** DARK PURPLE COLOR ***/
a.darkpurple {
	color: #50041C;
	text-shadow: 0 1px 0 #EE296E;
	border-color: #FF639A #C30D53 #F40858 #C30D53;
	
	background: rgb(232,15,129); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(232,15,129) 8%, rgb(155,4,37) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(8%,rgb(232,15,129)), color-stop(100%,rgb(155,4,37))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgb(232,15,129) 8%,rgb(155,4,37) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgb(232,15,129) 8%,rgb(155,4,37) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgb(232,15,129) 8%,rgb(155,4,37) 100%); /* IE10+ */
	background: linear-gradient(top, rgb(232,15,129) 8%,rgb(155,4,37) 100%); /* W3C */
}
a.darkpurple:after {
	border: 1px solid #9B0425;
	background: #850431;
	box-shadow: 
		inset 0 8px 5px 6px #F40858,
		      0 0 4px 1px #444;
	-moz-box-shadow: 
		inset 0 8px 5px 6px #F40858,
		      0 0 4px 1px #444;
	-webkit-box-shadow: 
		inset 0 8px 5px 6px #F40858,
		      0 0 4px 1px #444;
}

/**** PURPLE COLOR ****/
a.purple {
	color: #3F0340;
	text-shadow: 0 1px 0 #EB50ED;
	border-color: #DF5EE1 #B32AB5 #E54DE7 #B32AB5;
	
	background: rgb(225,123,229); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(225,123,229) 0%, rgb(168,73,163) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(225,123,229)), color-stop(100%,rgb(168,73,163))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgb(225,123,229) 0%,rgb(168,73,163) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgb(225,123,229) 0%,rgb(168,73,163) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgb(225,123,229) 0%,rgb(168,73,163) 100%); /* IE10+ */
	background: linear-gradient(top, rgb(225,123,229) 0%,rgb(168,73,163) 100%); /* W3C */
}
a.purple:after {
	border: 1px solid #AB24AD;
	background: #9F3C9B;
	box-shadow: 
		inset 0 8px 5px 6px #F76EF9,
		      0 0 4px 1px #444;
	-moz-box-shadow: 
		inset 0 8px 5px 6px #F76EF9,
		      0 0 4px 1px #444;
	-webkit-box-shadow: 
		inset 0 8px 5px 6px #F76EF9,
		      0 0 4px 1px #444;
}

/**** PINK COLOR ****/
a.pink {
	color: #CE0606;
	text-shadow: 0 1px 0 #FEB8B8;
	border-color: #FC9E9E #FA6666 #FC9A9A #FA6666;
	
	background: rgb(254,187,187); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(254,187,187) 0%, rgb(255,92,92) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(254,187,187)), color-stop(100%,rgb(255,92,92))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgb(254,187,187) 0%,rgb(255,92,92) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgb(254,187,187) 0%,rgb(255,92,92) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgb(254,187,187) 0%,rgb(255,92,92) 100%); /* IE10+ */
	background: linear-gradient(top, rgb(254,187,187) 0%,rgb(255,92,92) 100%); /* W3C */
}
a.pink:after {
	border: 1px solid #F94D4D;
	background: #F94949;
	box-shadow: 
		inset 0 8px 5px 6px #FCA6A6,
		      0 0 4px 1px #444;
	-moz-box-shadow: 
		inset 0 8px 5px 6px #FCA6A6,
		      0 0 4px 1px #444;
	-webkit-box-shadow: 
		inset 0 8px 5px 6px #FCA6A6,
		      0 0 4px 1px #444;
}

/**** RED COLOR ****/
a.red {
	color: #670303;
	text-shadow: 0 1px 0 #F94B37;
	border-color: #FA7162 #C8150C #F81E1E #C8150C;
	
	background: rgb(255,48,25); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(255,48,25) 0%, rgb(207,4,4) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,48,25)), color-stop(100%,rgb(207,4,4))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgb(255,48,25) 0%,rgb(207,4,4) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgb(255,48,25) 0%,rgb(207,4,4) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgb(255,48,25) 0%,rgb(207,4,4) 100%); /* IE10+ */
	background: linear-gradient(top, rgb(255,48,25) 0%,rgb(207,4,4) 100%); /* W3C */
}

a.red:after {
	border: 1px solid #AF130B;
	background: #C00606;
	box-shadow: 
		inset 0 8px 5px 6px #F94343,
		      0 0 4px 1px #444;
	-moz-box-shadow: 
		inset 0 8px 5px 6px #F94343,
		      0 0 4px 1px #444;
	-webkit-box-shadow: 
		inset 0 8px 5px 6px #F94343,
		      0 0 4px 1px #444;
}

/**** GREEN COLOR ****/
a.green {
	color: #204802;
	text-shadow: 0 1px 0 #A2DC00;
	border-color: #B0D206 #3A8004 #ACCD07 #3A8004;
	
	background: rgb(193,233,0); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(193,233,0) 0%, rgb(68,144,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(193,233,0)), color-stop(100%,rgb(68,144,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgb(193,233,0) 0%,rgb(68,144,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgb(193,233,0) 0%,rgb(68,144,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgb(193,233,0) 0%,rgb(68,144,1) 100%); /* IE10+ */
	background: linear-gradient(top, rgb(193,233,0) 0%,rgb(68,144,1) 100%); /* W3C */
}
a.green:after {
	border: 1px solid #347303;
	background: #408004;
	box-shadow: 
		inset 0 8px 5px 6px #BBDF07,
		      0 0 4px 1px #444;
	-moz-box-shadow: 
		inset 0 8px 5px 6px #BBDF07,
		      0 0 4px 1px #444;
	-webkit-box-shadow: 
		inset 0 8px 5px 6px #BBDF07,
		      0 0 4px 1px #444;
}

/**** BLUE COLOR ****/
a.blue {
	color: #022B4A;
	text-shadow: 0 1px 0 #07A9F1;
	border-color: #068FCA #0579AB #079EDF #0579AB;
	
	background: rgb(0,157,226); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(0,157,226) 0%, rgb(0,99,176) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(0,157,226)), color-stop(100%,rgb(0,99,176))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgb(0,157,226) 0%,rgb(0,99,176) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgb(0,157,226) 0%,rgb(0,99,176) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgb(0,157,226) 0%,rgb(0,99,176) 100%); /* IE10+ */
	background: linear-gradient(top, rgb(0,157,226) 0%,rgb(0,99,176) 100%); /* W3C */
}
a.blue:after {
	border: 1px solid #055795;
	background: #0561A7;
	box-shadow: 
		inset 0 8px 5px 6px #33BEF9,
		      0 0 4px 1px #444;
	-moz-box-shadow: 
		inset 0 8px 5px 6px #33BEF9,
		      0 0 4px 1px #444;
	-webkit-box-shadow: 
		inset 0 8px 5px 6px #33BEF9,
		      0 0 4px 1px #444;
}

/**** YELLOW COLOR ****/
a.yellow {
	color: #4D2703;
	text-shadow: 0 1px 0 #F1DB37;
	border-color: #E7B613 #CAA606 #F3DB45 #CAA606;
	
	background: rgb(239,222,49); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(239,222,49) 0%, rgb(255,157,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(239,444,49)), color-stop(100%,rgb(255,157,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgb(239,222,49) 0%,rgb(255,157,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgb(239,222,49) 0%,rgb(255,157,0) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgb(239,222,49) 0%,rgb(255,157,0) 100%); /* IE10+ */
	background: linear-gradient(top, rgb(239,222,49) 0%,rgb(255,157,0) 100%); /* W3C */
}
a.yellow:after {
	border: 1px solid #DD8B07;
	background: #F59A07;
	box-shadow: 
		inset 0 8px 5px 6px #F3E24F,
		      0 0 4px 1px #444;
	-moz-box-shadow: 
		inset 0 8px 5px 6px #F3E24F,
		      0 0 4px 1px #444;
	-webkit-box-shadow: 
		inset 0 8px 5px 6px #F3E24F,
		      0 0 4px 1px #444;
}

/**** LIGHT COLOR (white) ****/
a.light {
	color: #333333;
	text-shadow: 0 1px 0 #A5A5A5;
	border-color: #CACACA #919191 #C4C4C4 #919191;
	
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(246,246,246) 47%, rgb(237,237,237) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(47%,rgb(246,246,246)), color-stop(100%,rgb(237,237,237))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgb(255,255,255) 0%,rgb(246,246,246) 47%,rgb(237,237,237) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgb(255,255,255) 0%,rgb(246,246,246) 47%,rgb(237,237,237) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgb(255,255,255) 0%,rgb(246,246,246) 47%,rgb(237,237,237) 100%); /* IE10+ */
	background: linear-gradient(top, rgb(255,255,255) 0%,rgb(246,246,246) 47%,rgb(237,237,237) 100%); /* W3C */
}
a.light:after {
	border: 1px solid #7E7E7E;
	background: #E5E5E5;
	box-shadow: 
		inset 0 8px 5px 6px #AAAAAA,
		      0 0 4px 1px #444;
	-moz-box-shadow: 
		inset 0 8px 5px 6px #AAAAAA,
		      0 0 4px 1px #444;
	-webkit-box-shadow: 
		inset 0 8px 5px 6px #AAAAAA,
		      0 0 4px 1px #444;
}

/**** DARK COLOR (black) ****/

a.dark {
	color: #E0E0E0;
	text-shadow: 0 1px 0 #444444;
	border-color: #676767 #444444 #575151 #444444;
	
	background: rgb(85,78,78); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(85,78,78) 0%, rgb(50,47,47) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(85,78,78)), color-stop(100%,rgb(50,47,47))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgb(85,78,78) 0%,rgb(50,47,47) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgb(85,78,78) 0%,rgb(50,47,47) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgb(85,78,78) 0%,rgb(50,47,47) 100%); /* IE10+ */
	background: linear-gradient(top, rgb(85,78,78) 0%,rgb(50,47,47) 100%); /* W3C */	
}
a.dark:after {
	border: 1px solid #424242;
	background: #322F2F;
	box-shadow: 
		inset 0 8px 5px 6px #766E6E,
		      0 0 4px 1px #444;
	-moz-box-shadow: 
		inset 0 8px 5px 6px #766E6E,
		      0 0 4px 1px #444;
	-webkit-box-shadow: 
		inset 0 8px 5px 6px #766E6E,
		      0 0 4px 1px #444;
}